<template>
  <div>
    <div>
      <el-row :gutter="20">
        <el-col :span="14">
          <div ref="mycontentRef" style="width: 100%;display: flex;align-items: center;justify-content: space-between">
            <div ref="myimgRef" style="margin-right: 5px">
              <div>
                <img @click="toList(moduleImg1.mhModule.linkId)" v-if="moduleImg1"
                     :src="sysConstant.FILE_SRC_PATH +moduleImg1.mhModule.bannerList[0].filePath"
                     style="width: 120px;height: 180px"/>

              </div>
              <div style="margin-top: 5px">
                <img @click="toList(moduleImg2.mhModule.linkId)" v-if="moduleImg2"
                     :src="sysConstant.FILE_SRC_PATH +moduleImg2.mhModule.bannerList[0].filePath"
                     style="width: 120px;height: 180px"/>
              </div>
            </div>
            <div :style="{'width': carouselWidth}">
              <el-carousel height="365px"  v-if="bannerModule && bannerModule.mhModule" >
                <el-carousel-item v-for="item in bannerModule.mhModule.bannerList" :key="item.id">
                  <img  @click="toContent1(item)"  :src="sysConstant.FILE_SRC_PATH +item.filePath"/>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div @click="toList(moduleList[0].mhModule.linkId)"
               style="display: flex;align-items: center;justify-content: space-between;height: 42px;background-color: #f0f0f0">
            <div v-if="moduleList.length>0" class="tbg">{{ moduleList[0].mhModule.mhMenu.name }}</div>
            <div style="margin-right: 20px;color: #BF1108">更多>></div>
          </div>
          <div style="margin-top: 10px">
            <div v-for="item in contentList[0]" :key="item.id"
                 style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding: 9px 0">
              <div style="display: flex;align-items: center;">
                <div style="height: 7px;width:7px;background-color: #ccc;border-radius: 50%"></div>
                <div style="margin-left: 8px">
                  <el-link @click="toContent(item)" target="_blank">{{ item.title }}</el-link>
                </div>
              </div>
              <div v-if="item.releaseTime">{{ item.releaseTime.split(" ")[0].substring(5, 10) }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--    <div style="margin-top: 20px">-->
    <!--      <el-row :gutter="20">-->
    <!--        <el-col :span="12">-->
    <!--          <img src="../../assets/img/tgxt.png" style="width: 100%;height: 85px">-->
    <!--        </el-col>-->
    <!--        <el-col :span="12" >-->
    <!--          <img src="../../assets/img/ztc.png" style="width: 100%;height: 85px">-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--    </div>-->
    <div style="margin-top: 20px" v-for="(o,index1) in 2" :key="index1">
      <el-row :gutter="20">
        <el-col :span="14">
          <div @click="toList(moduleList[(o + parseInt(o / 2))].mhModule.linkId)"
               style="display: flex;align-items: center;justify-content: space-between;height: 42px;background-color: #f0f0f0">
            <div class="tbg" v-if="moduleList.length>0">{{
                moduleList[(o + parseInt(o / 2))].mhModule.mhMenu.name
              }}
            </div>
            <div style="margin-right: 20px;color: #BF1108">更多>></div>
          </div>
          <div style="margin-top: 10px">
            <div v-for="(item,index) in contentList[(o + parseInt(o / 2))]" :key="index"
                 style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding: 9px 0">
              <div style="display: flex;align-items: center;">
                <div style="height: 7px;width:7px;background-color: #ccc;border-radius: 50%"></div>
                <div style="margin-left: 8px">
                  <el-link @click="toContent(item)" target="_blank">{{ item.title }}</el-link>
                </div>
              </div>
              <div v-if="item.releaseTime">{{ item.releaseTime.split(" ")[0].substring(5, 10) }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div @click="toList(moduleList[(o + parseInt(o / 2)+1)].mhModule.linkId)"
               style="display: flex;align-items: center;justify-content: space-between;height: 42px;background-color: #f0f0f0">
            <div class="tbg" v-if="moduleList.length>0">{{
                moduleList[(o + parseInt(o / 2) + 1)].mhModule.mhMenu.name
              }}
            </div>
            <div style="margin-right: 20px;color: #BF1108">更多>></div>
          </div>
          <div style="margin-top: 10px">
            <div v-for="(item,index) in contentList[(o + parseInt(o / 2)+1)]" :key="index"
                 style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding: 9px 0">
              <div style="display: flex;align-items: center;">
                <div style="height: 7px;width:7px;background-color: #ccc;border-radius: 50%"></div>
                <div style="margin-left: 8px">
                  <el-link @click="toContent(item)" target="_blank">{{ item.title }}</el-link>
                </div>
              </div>
              <div v-if="item.releaseTime">{{ item.releaseTime.split(" ")[0].substring(5, 10) }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <el-row>
        <el-col :span="24">
          <img v-if="moduleImg" :src="sysConstant.FILE_SRC_PATH +moduleImg.mhModule.bannerList[0].filePath"
               style="width: 100%;height: 85px">
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px" v-for="(o,index1) in 2" :key="index1*100+10">
      <el-row :gutter="20">
        <el-col :span="14">
          <div @click="toList(moduleList[(o + parseInt(o / 2)+4)].mhModule.linkId)"
               style="display: flex;align-items: center;justify-content: space-between;height: 42px;background-color: #f0f0f0">
            <div class="tbg" v-if="moduleList.length>0">{{
                moduleList[(o + parseInt(o / 2) + 4)].mhModule.mhMenu.name
              }}
            </div>
            <div style="margin-right: 20px;color: #BF1108">更多>></div>
          </div>
          <div style="margin-top: 10px">
            <div v-for="(item,index) in contentList[(o + parseInt(o / 2)+ 4)]" :key="index*100+100"
                 style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding: 9px 0">
              <div style="display: flex;align-items: center;">
                <div style="height: 7px;width:7px;background-color: #ccc;border-radius: 50%"></div>
                <div style="margin-left: 8px">
                  <el-link @click="toContent(item)" target="_blank">{{ item.title }}</el-link>
                </div>
              </div>
              <div v-if="item.releaseTime">{{ item.releaseTime.split(" ")[0].substring(5, 10) }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div @click="toList(moduleList[(o + parseInt(o / 2)+5)].mhModule.linkId)"
               style="display: flex;align-items: center;justify-content: space-between;height: 42px;background-color: #f0f0f0">
            <div class="tbg" v-if="moduleList.length>0">{{
                moduleList[(o + parseInt(o / 2) + 5)].mhModule.mhMenu.name
              }}
            </div>
            <div style="margin-right: 20px;color: #BF1108">更多>></div>
          </div>
          <div style="margin-top: 10px">
            <div v-for="(item,index) in contentList[(o + parseInt(o / 2)+ 5)]" :key="index"
                 style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding: 9px 0">
              <div style="display: flex;align-items: center;">
                <div style="height: 7px;width:7px;background-color: #ccc;border-radius: 50%"></div>
                <div style="margin-left: 8px">
                  <el-link @click="toContent(item)" target="_blank">{{ item.title }}</el-link>
                </div>
              </div>
              <div v-if="item.releaseTime">{{ item.releaseTime.split(" ")[0].substring(5, 10) }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselWidth: 0,
      moduleList: [],
      contentList: [],
      moduleImg: '',
      moduleImg1: '',
      moduleImg2: '',
      sysConstant: this.sysConstant,
      menuList: [],
      bannerModule: ''
    }
  },
  mounted() {
    const width = this.$refs.mycontentRef.clientWidth;
    console.log(width);
    let aa = width;
    console.log(aa);
    const widthimg = this.$refs.myimgRef.clientWidth;
    this.carouselWidth = aa - widthimg + "px"
  },
  activated() {
    this.getMenuList()
    this.getBGImg()
    this.getBanner()
  },
  methods: {
    toList(id) {
      this.$router.replace({'name': 'list', 'query': {'menuId': id}})
    },
    toContent(row) {
      if (row.type === 0) {
        window.open(this.$router.resolve({name: 'content', query: {'contentId': row.id}}).href, '_blank');
      } else if (row === 1) {
        window.open(row.url, '_blank');
      }
    },
    getMenuList() {
      this.$http({
        url: this.$http.adornUrl('/mh/menu/list'),
        method: 'get',
        params: this.$http.adornParams({'status': this.sysConstant.DATA_NORMAL_STATUS})
      }).then(({data}) => {
        if (data.success) {
          this.menuList = data.data
          this.getIndexModuleList()
        }
      })
    },
    getIndexModuleList() {
      this.$http({
        url: this.$http.adornUrl('/mh/index/module/list'),
        method: 'get',
        params: this.$http.adornParams({'type': 1})
      }).then(({data}) => {
        if (data.success) {
          this.moduleList = data.data
          for (let i = 0; i < data.data.length; i++) {
            this.contentList[i] = []
          }
          this.getContentList(this.getMenuIdList(data.data[0].mhModule.linkId), 9, 0)
          for (let i = 1; i < data.data.length; i++) {
            this.getContentList(this.getMenuIdList(data.data[i].mhModule.linkId), 6, i)
          }
        }
      })
    },
    getMenuIdList(menuId1) {
      let menuIdList1 = []
      menuIdList1.push(menuId1)
      for (let i = 0; i < this.menuList.length; i++) {
        if (this.menuList[i].parentId === menuId1) {
          menuIdList1.push(this.menuList[i].id)
        }
      }
      return menuIdList1.join();
    },
    getContentList(categoryIdListStr, pageSize, index) {
      this.$http({
        url: this.$http.adornUrl('/mh/content/page'),
        method: 'get',
        params: this.$http.adornParams({
          'status': this.sysConstant.DATA_NORMAL_STATUS,
          'categoryIdListStr': categoryIdListStr,
          'pageNumber': 1,
          'pageSize': pageSize,
        })
      }).then(({data}) => {
        if (data.list.length > 0) {
          this.contentList.splice(index, 1, data.list)
          console.log(index)
          this.$forceUpdate()
        } else {
          this.contentList[index] = []
        }
      })
    },

    getBGImg() {
      this.$http({
        url: this.$http.adornUrl('/mh/index/module/list'),
        method: 'get',
        params: this.$http.adornParams({'type': 0})
      }).then(({data}) => {
        if (data.success) {
          this.moduleImg1 = data.data[1]
          this.moduleImg2 = data.data[2]
          this.moduleImg = data.data[3]
          // this.getBGImg1(moduleId)
        }
      })
    },
    getBanner() {
      this.$http({
        url: this.$http.adornUrl('/mh/index/module/list'),
        method: 'get',
        params: this.$http.adornParams({'type': 2})
      }).then(({data}) => {
        if (data.success) {
          this.bannerModule = data.data[0]
        }
      })
    },

    toContent1(row) {
      console.log(row)
      if(row.contentId){
        window.open(this.$router.resolve({name: 'content', query: {'contentId': row.contentId}}).href, '_blank');
      }else{
        window.open(row.url, '_blank');
      }
    },

  }
}
</script>

<style>

.tbg {
  background-image: url(~@/assets/img/titleimg.png); /* 替换为你的图片路径 */
  background-repeat: no-repeat;
  background-size: 150px 42px;
  height: 42px;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>

